<template>
  <div>

  </div>
</template>

<script>
import {control} from "maptalks";

export default {
  name: "ctMapLayerSwitch",
  components: {},
  props: {
    layers: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data: () => ({
    layerName: 'baidu', // 'baidu' , 'gaode'
  }),
  created() {
  },
  mounted() {
    const vue = this;
    this.$nextTick(() => {
      const {map} = this.$parent;
      this.createController(map)
    });
  },
  methods: {
    createController(map) {
      new control.LayerSwitcher({
        position: {'top': '10', 'right': '50'},
        // position: 'top-right',
        // title of base layers
        baseTitle: '底图',
        // title of layers
        overlayTitle: '图形层',
        // layers you don't want to manage with layer switcher
        excludeLayers: [],
        // css class of container element, maptalks-layer-switcher by default
        containerClass: 'maptalks-layer-switcher'
      }).addTo(map);
      new control.LayerSwitcher({
        position: {'top': '34', 'right': '50'},
        // position: 'top-right',
        // title of base layers
        baseTitle: '底图',
        // title of layers
        overlayTitle: '图形层',
        // layers you don't want to manage with layer switcher
        excludeLayers: [],
        // css class of container element, maptalks-layer-switcher by default
        containerClass: 'maptalks-layer-switcher'
      }).addTo(map);
    }
  },
}
</script>

<style>
.maptalks-layer-switcher  .panel{
  background-color: rgb(255, 255, 255);

}
</style>
